<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小雨书店</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        body {
            font-family: "Quicksand", sans-serif;
            display: grid;
            place-items: center;
            height: 100vh;
            background: #7f7fd5;
            background: linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5);
        }

        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 1200px;
            margin-block: 2rem;
            gap: 2rem;
        }

        img {
            max-width: 100%;
            display: block;
            object-fit: cover;
        }

        .card {
            display: flex;
            flex-direction: column;
            width: clamp(20rem, calc(20rem + 2vw), 22rem);
            overflow: hidden;
            box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.1);
            border-radius: 1em;
            background: #ECE9E6;
            background: linear-gradient(to right, #FFFFFF, #ECE9E6);

        }

        .card__body {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: .5rem;
        }

        .tag {
            align-self: flex-start;
            padding: .25em .75em;
            border-radius: 1em;
            font-size: .75rem;
        }

        .tag + .tag {
            margin-left: .5em;
        }

        .tag-blue {
            background: #56CCF2;
            background: linear-gradient(to bottom, #2F80ED, #56CCF2);
            color: #fafafa;
        }

        .tag-brown {
            background: #D1913C;
            background: linear-gradient(to bottom, #FFD194, #D1913C);
            color: #fafafa;
        }

        .tag-red {
            background: #cb2d3e;
            background: linear-gradient(to bottom, #ef473a, #cb2d3e);
            color: #fafafa;
        }

        .card__body h4 {
            font-size: 1.5rem;
            text-transform: capitalize;
        }

        h4 a{
            color:#202020;
            text-decoration-line:none;

        }
        h4 a:hover{
            color:#1717e5;
        }

        .card__footer {
            display: flex;
            padding: 1rem;
            margin-top: auto;
        }

        .user {
            display: flex;
            gap: .5rem;
        }

        .user__image {
            border-radius: 50%;
        }

        .user__info > small {
            color: #666;
        }
        .todo{
            width: 100%;
            text-align: center;
        }
        .btn{
            width: 60px;
            padding: 5px;
            cursor: pointer;
            margin: 6px 20px;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="card">
        <div class="card__body">
            <span class="tag tag-blue">80.00￥</span>
            <h4><a href="javascript:;">JavaScript高级程序设计</a></h4>
        </div>
        <div class="card__footer">
            <div class="user">
                <div class="user__info">
                    <h5>作者</h5>
                </div>
            </div>
        </div>
        <div class="todo">
            <button class="tag-red btn">删除</button>
            <button class="tag-brown btn">编辑</button>
        </div>
    </div>
</div>
</body>
</html>
